<template>
  <div class="cycle-box">
    <!--    头部-->
    <!-- <div class="bank-card-box">
      <div class="item">
        <div class="card-head__logo">
          <img src="@icon/logo-g.png" alt="" />
        </div>
        <span class="span-text">6666****8888</span>
        <div class="card-right__logo">
          <img src="@icon/arrow-b.png" alt="" />
        </div>
      </div>
    </div> -->
    <dropdownTop />
    <div class="line-box"></div>

    <div class="bank-card-box">
      <div class="item" @click="handleTypeCard">
        <div class="card-head__logo">
          <img src="@icon/logo-g.png" alt="" />
        </div>
        <span class="span-text">账单类型</span>
        <div class="card-right__logo">
          <img src="@icon/arrow-b.png" alt="" />
        </div>
      </div>
    </div>
    <div class="line-box"></div>

    <!--    选择-->
    <div class="select-bill-time">
      <div class="time-picker">
        <p class="left-1">账单周期</p>
        <p class="right-1" @click="billSelect = !billSelect">
          <span class="rage-1">2021/01</span>
          <span class="line"></span>
          <span class="rage-1">2021/03</span>
        </p>
      </div>

      <div class="time-picker time-picker-2">
        <van-field
          v-model="emailValue"
          label="邮箱"
          clearable
          placeholder="请输入接收邮箱"
          input-align="right"
        />
      </div>
    </div>
    <!--    温馨提示-->
    <div class="tips">
      <p>温馨提示</p>
      <p>补打的电子账单一般在3个工作日内发送至您的指定邮箱内，请注意查收。</p>
      <div class="button">确定</div>
    </div>
    <van-popup
      v-model="billSelect"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ 'min-height': '17%' }"
    >
      <div class="amount-list">
        <h3>周期选择</h3>
        <div class="cycle-list">
          <p class="cycle-time">2021年</p>
          <p class="time" v-for="(item, index) in 3" :key="index">
            <span>{{ `${index + 1}月账单` }}</span>
            <span>2021/02/20-2021/03/19</span>
          </p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import dropdownTop from "@comp/dropdownTop";

export default {
  name: "billCycle",
  components: {
    dropdownTop
  },
  data() {
    return {
      billSelect: false,
      emailValue: ""
    };
  },
  methods: {
    handleTypeCard() {
      const column1 = [
        { text: "普通账单", value: "1" },
        { text: "专项账单", value: "2" }
      ];
      if (!this.picker) {
        this.picker = this.$createPicker({
          data: [column1],
          onSelect: () => {
            console.log(1);
          },
          onCancel: () => {
            console.log("取消");
          }
        });
      }
      this.picker.show();
    }
  }
};
</script>

<style lang="stylus" scoped>
/deep/ .van-cell
  padding 0
  color #333333
  font-size 32px

.cycle-box
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  color #333

  .bank-card-box
    background #fff

    .item
      display flex
      align-items center
      padding 0 27px 0 33px
      height 90px
      color #333333

      .span-text
        padding 0 16px
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 48px
    height 48px
    display flex
    justify-content center
    margin-left 16px

    img
      width 100%
      height 100%

    .img2
      width 22px
      height 16px

  .select-bill-time
    background #fff
    display flex
    flex-direction column
    justify-content center

    .time-picker
      display flex
      align-items center
      justify-content space-between
      height 90px
      margin-left 30px
      padding-right 30px
      border-bottom 2px solid #E6E6E6

      .right-1
        display flex

        .line
          display flex
          width 44px
          align-items center
          margin 16px 0
          color #969799
          font-size 14px
          line-height 24px
          border-color #ebedf0
          border-style solid
          border-width 0
          padding 0 20px

          &:after
            content ''
            display block
            -webkit-box-flex: 1
            -webkit-flex: 1
            flex: 1
            box-sizing: border-box
            height: 1px
            border-color: inherit
            border-style: inherit
            border-width: 1px 0 0

        .rage-1
          display flex
          align-items center
          justify-content center
          height 60px
          border 1px solid #e5e5e5
          padding 0 30px
          border-radius 30px
          color #555555

          &:after
            content ''
            margin-left 10px
            width 0
            height 0
            border-left 12px solid transparent
            border-right 12px solid transparent
            border-top 20px solid #808080

    .time-picker-2
      .right-2
        border none

.bill-box
  background #fff


.line-box
    height 20px
    background #F7F7F7

.amount-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6

  .cycle-list
    color #333333
    font-size 32px

    .cycle-time
      color #666

  .time
    display flex
    align-items center
    justify-content space-between
    padding-right 30px

    span
      &:last-of-type
        color #666

  p
    margin-left 32px
    border-bottom 1px solid #E6E6E6
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px
.tips
  padding 30px
  font-size 28px
  p
    &:last-of-type
      padding-bottom 30px
  .button
    display flex
    width 686px
    height 88px
    background #FFA900
    border-radius 8px
    color #fff
    font-size 36px
    align-items center
    justify-content center
    margin 30px auto
</style>
